<template>
    <div class="bg" @click="liebiao()">
        <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-shanchu2"></use>
        </svg>
    </div>
    <div class="meList">
        <div class="meList-top">
            <div class="title">最近播放<span>共{{playlist.length}}首</span></div>
        </div>
        <div class="musicList">
        <div class="music" v-for="(item,i) in playlist" :key="i" @click="setplay(i)">
            <div class="bh">{{i+1}}.</div>
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-bofang3"></use>
            </svg>
            <div class="title">{{item.name}}</div>
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-tianjia"></use>
            </svg>
            <svg class="icon" aria-hidden="true" @click="shangchu(i)">
                <use xlink:href="#icon-shanchu2"></use>
            </svg>
        </div>
        </div>
    </div>
</template>
<script>
import { mapState } from 'vuex'
export default {
  props: ['liebiao'],
  data () {

  },
  computed: {
    ...mapState(['playlist', 'playCurrentIndex'])

  },
  methods: {
    setplay (i) {
      this.$store.commit('setPlayIndex', i)
    },
    shangchu (i) {
      if (this.playlist.length > 1) {
        this.playlist.splice(i, 1)
        this.$store.commit('setPlaylist', this.playlist)
      } else {
        console.log('最后一首了')
      }
    }
  }

}
</script>
<style lang="less" scoped>
.bg{
    width: 100vw;
    height: 100vh;
    position:absolute;
    top: 0rem;
    z-index: 555;
    opacity:0.5;
    background-color: gray;
    .icon{
        z-index: 999;
        fill: #000;
        width: 0.8rem;
        height: 0.8rem;
        position:absolute;
        top: 12.4rem;
        left: 3.5rem;
    }
}
.meList{
    width: 7.5rem;
    background-color: white;
    position:absolute;
    top: 4rem;
    z-index: 666;
    .meList-top{
        width: 7.1rem;
        margin: 0 auto;
        padding-bottom: 0.1rem;
        border-bottom:2px solid red;
        .title{
            font-weight: 900;
            color:gray;
            font-size: 0.4rem;
            span{
                font-size: 0.3rem;
                color: #ccc;
                margin-left: 0.2rem;
            }
        }
    }
    .musicList{
        height: 7.6rem;
        overflow: auto;
    }
    .music{
        display: flex;
        align-items: center;
        height: 1rem;
        width: 7.1rem;
        margin: 0 auto;
        .bh{
            font-size: 0.4rem;
            width: 0.6rem;
        }
        .icon{
            fill: gray;
            width: 0.4rem;
            height: 0.4rem;
            margin: 0 0.2rem;
        }
        .title{
            width: 4rem;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
    }
}
</style>
